<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">商户详情</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="informEdit"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <div class="merchant-title mer-m-b-8">
          {{ registerData.userShortName }}
        </div>
        <div class="merchant-box adaptive">
          <div class="merchant-item-content">
            <span>商户号：{{ registerData.rpiNo }}</span>
            <span>注册名称：{{ registerData.registeredName }}</span>
            <span>门头名称：{{ registerData.rpiName }}</span>
          </div>
          <div class="merchant-item-content">
            <span>服务商：{{ registerData.serName }}</span>
            <span>客户经理：{{ registerData.accountManagerName }}</span>
            <span>开通日期：{{ registerData.passTime }}</span>
          </div>
          <div class="merchant-item-content">
            <span>联系人姓名：{{ registerData.contactsName }}</span>
            <span>联系方式：{{ registerData.contactsPhone }}</span>
          </div>
        </div>
      </div>
      <!-- START payfunc -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ posTitle.payTitle }}</span>
        </div>
        <!-- active-color="#13ce66" -->
      </div>
      <div class="haruyuki-content merchant-box">
        <div :class="[payItem.show?'merchant-icon-func':'']" v-for="payItem in payData" :key="payItem.id">
          <div v-if="payItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="payItem.image"
              fit="fill"
              @click="payFuncOperate(payItem.id)"
            ></el-image>
            <div class="cursor" @click="payFuncOperate(payItem.id)">{{ payItem.name }}</div>
          </div>
        </div>
      </div>
      <!-- END payfunc -->

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i
          ><span class="haruyuki-ml-6">{{ posTitle.merchantTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div class="merchant-icon-func" v-for="moduleItem in moduleData" :key="moduleItem.id">
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
              @click="moduleOperate(moduleItem.id)"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>
    </section>
    <el-dialog
      :title="'编辑' + dialogText"
      top="1%"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div>
          <register-form :registerForm="registerForm" :regType="dialogType" ref="toRegisterForm"/>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <!-- 商户信息变更 -->
    <el-dialog
      title="变更商户信息"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogAlterVisible"
      :before-close="handleAlterClose">
      <template>
        <!-- <div class="merchant-padding" v-if="dialogType === 'edit'">
          <audit-record :rejectRecord="rejectRecord" ref="toAuditRecord" />
        </div> -->
        <alter-form :isAlterShow="isAlterShow" :rpiNo="rpiNo" ref="toAlterForm" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" size="small" @click="dialogAlterVisible = false">取 消</el-button>
        <el-button icon="el-icon-check" size="small" type="primary" v-preventClick @click="handleConfirm">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 变更归属服务商 -->
    <el-dialog
      title="变更归属服务商"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogServiceVisible"
    >
      <avue-form
        ref="serveForm"
        :option="serveOption"
        v-model="serveForm"
        @submit="serveSubmit"
      >
        <template slot="oldSerNo" slot-scope="{}">
          <div class="el-input el-input--small el-input--suffix avue-input feint-input">
            <span style="float: left">{{ serveForm.oldSerName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ serveForm.oldSerNo }}</span>
          </div>
        </template>
        <template slot-scope="{}" slot="serNo">
          <select-page ref="searchSerSelect" label="serviceName" value="serviceNo" :select.sync="serveForm.serNo" :url="website.searchLink.serviceUrl" placeholder-text="目标服务商" filter-key="searchKey" :params="searchSerSelectParams" @update:select="serNoChange"></select-page>
        </template>
        <template slot="oldAccountManager" slot-scope="{}">
          <div class="el-input el-input--small el-input--suffix avue-input feint-input">
            <span style="float: left">{{ serveForm.oldAccountManagerName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ serveForm.oldAccountManager }}</span>
          </div>
        </template>
      </avue-form>
    </el-dialog>
    <el-image-viewer
      style="z-index: 2048"
      v-if="alipayImgShow"
      :on-close="
        () => {
          alipayImgShow = false;
        }
      "
      :url-list="alipayImg"
    ></el-image-viewer>
  </basic-container>
</template>

<script>
import {
  getServiceChangeDetail,
  serviceChange,
} from "@/api/rb-oem/posinfo/pos_info_details";
import {
  editPosIncoming,
  getDetailPosIncoming,
  getAccountManagerList
} from "@/api/rb-oem/posinfo/pos_info";
import { add, getRptNo } from "@/api/rb-oem/terminal/terminal";

import alterForm from '@/components/rb-merchant/alter-form.vue';
import registerForm from "@/components/rb-merchant/register-form";
import selectPage from "@/components/select-page/select-page";

export default {
  components: {
    alterForm,
    registerForm,
    selectPage
  },
  data() {
    return {
      posTitle: {
        basicTitle: "商户信息",
        cardTitle: "结算信息",
        rateTitle: "费率信息",
        remarkTitle: "备注信息",
        aisleTitle: "支付通道",
        firmTitle: "支付公司",
        hardwareTitle: "硬件设备配置",
        payTitle: "支付信息",
        merchantTitle: "商户管理",
        activityRequest: "活动申请",
      },
      dialogVisible: false,
      dialogType: "", //打开类型 add/edit
      dialogText: "",
      registerData: {},
      registerForm: {},
      rpiNo: "",
      merchantId: "",
      loading: false,
      dialogAlterVisible: false,
      isAlterShow: false, //是否显示变更表单某内容
      payData: [
        {
          id: 3,
          name: "签约费率",
          image: "/img/merchant-icon/rate.png",
          type: 'rate',
          show: true,
        },
        {
          id: 5,
          name: "信息变更",
          image: "/img/merchant-icon/alteration.png",
          type: 'alteration',
          show: true,
        },
      ],
      moduleData: [
        {
          id: 1,
          name: "门店管理",
          image: "/img/merchant-icon/store.png",
          type: 'store',
          show: true,
        },
        {
          id: 2,
          name: "终端管理",
          image: "/img/merchant-icon/terminal.png",
          type: 'terminal',
          show: true,
        },
        {
          id: 3,
          name: "设备管理",
          image: "/img/merchant-icon/equipment.png",
          type: 'equipment',
          show: true,
        },
        {
          id: 4,
          name: "变更服务商归属",
          image: "/img/merchant-icon/service.png",
          type: 'service',
          show: true,
        },
      ],
      dialogServiceVisible: false,
      serveForm: {},
      serveOption: {
        emptyBtn: false,
        column: [
          {
            label: "原归属服务商",
            prop: "oldSerNo",
            type: "input",
            labelWidth: 120,
            span: 24,
            overHidden: true,
          },
          {
            label: "原归属客户经理",
            prop: "oldAccountManager",
            type: "input",
            labelWidth: 120,
            span: 24,
            overHidden: true,
          },
          {
            label: "目标服务商",
            labelWidth: 120,
            prop: "serNo",
            span: 24,
            minRows: 2,
            type: "select",
            formslot: true,
            // filterable: true,
            // props: {
            //   label: "serviceName",
            //   value: "serviceNo",
            //   desc: "serviceNo",
            // },
            // change: (row) => {
            //   if (row) {
            //     // 获取供应商
            //     this.serveForm.accountManager = '';
            //     if (row.value) {
            //       let serviceInfo = row.column.dicData.filter(obj => obj.serviceNo == row.value);
            //       getAccountManagerList({ createUser: serviceInfo[0].serviceNo }).then((res) => {
            //         const column = this.findObject(this.serveOption.column, "accountManager");
            //         column.dicData = res.data.data;
            //       });
            //     }
            //   }
            // },
            // dicData: [],
            rules: [
              {
                required: true,
                message: "请选择目标服务商",
                trigger: "blur",
              },
            ],
          },
          {
            label: "目标客户经理",
            labelWidth: 120,
            prop: "accountManager",
            span: 24,
            minRows: 2,
            type: "select",
            filterable: true,
            formslot: true,
            props: {
              label: "userName",
              value: "userNo",
              desc: "userNo",
            },
            dicData: [],
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择目标客户经理",
            //     trigger: "blur",
            //   },
            // ],
          },
        ],
      },
      searchSerSelectParams: {
        isSelectChild: '1',
        serviceNo: ''
      },
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  watch: {
    "$route.query.d": {
      handler(val) {
        if (val) {
          const param = JSON.parse(this.$crypto.decrypt(val));
          const { rpiNo } = param;
          this.rpiNo = rpiNo;
          this.infoData();
        }
      },
      immediate: true,
    }
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {
    /**
     * @func 支付信息功能
     * @desc 支付信息功能 操作控制
     * */
    payFuncOperate(id) {
      switch (id) {
        case 1:
          break;
        case 2:
          break;
        case 3:
          this.getRatePage();
          break;
        case 4:
          break;
        case 5:
          this.getAlterPage();
          break;
      }
    },
    /**
     * @func 支付信息功能-3(签约费率)
     * @desc 签约费率 rate
     * */
    getRatePage() {
      this.$router.push({
        name: "签约费率",
        query: {
          rpiNo: this.rpiNo,
          id: this.merchantId,
        },
      });
    },
    /**
     * @func 支付信息功能-4(通道配置)
     * @desc 通道配置 aisle
     * */
     getAislePage() {
      if (this.isAisleShow == '1') {
        this.$router.push({
          name: "通道配置",
          query: {
            rpiNo: this.rpiNo
          },
        });
      } else {
        this.$message({ type: "warning", message: "暂无默认通道" });
      }
    },
    /**
     * @func 支付信息功能-4(通道配置)
     * @desc 通道配置 aisle
     * */
     getAlterPage() {
      this.dialogAlterVisible = true;
    },
    /**
     * @func 变更类型信息确认
     * @desc alterType(变更/修改)确认
     * */
    handleConfirm() {
      this.$refs['toAlterForm'].$refs['alterForm'].validate((valid) => {
        if (valid) {
          this.$router.push({
            name: "商户变更",
            query: {
              rpiNo: this.rpiNo,
              changeType: this.$refs['toAlterForm'].alterForm.changeType,
              aisleCode: this.$refs['toAlterForm'].alterForm.aisleCode,
              // aisleCode: this.rateInformation.aisleCode,
              alterType: 'add'
            }
          });
        } else {
          return false;
        }
      });
    },
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
					case 1:
            this.getStorePage();
						break;
					case 2:
						// this.terminalDialog.visible = true;
            this.getTerminalPage();
						break;
					case 3:
            this.$router.push({
              name: "设备管理",
              query: {
                rpiNo: this.rpiNo
              }
            });
						break;
					case 4:
            this.handleBelongerService();
						break;
					case 5:
						break;
				}
    },
    /**
     * @func 商户模块管理-1(门店管理)
     * @desc 门店管理 store
     * */
    getStorePage() {
      this.$router.push({
        name: "门店管理",
        query: {
          rpiNo: this.rpiNo
        },
      });
    },
    /**
     * @func 商户模块管理-2(终端管理)
     * @desc 门店管理 store
     * */
    getTerminalPage() {
      this.$router.push({
        name: "终端管理",
        query: {
          rpiNo: this.rpiNo
        },
      });
    },
    /**
     * @func 商户模块管理-4(变更归属服务商)
     * @desc 变更归属服务商
     * */
    handleBelongerService() {
      this.dialogServiceVisible = true;
      const accountManagerColumn = this.findObject(this.serveOption.column, "accountManager");
      accountManagerColumn.dicData = [];
      getServiceChangeDetail(this.rpiNo).then((res) => {
        this.serveForm = res.data.data;
        this.serveForm = {
          accountManager: "",
          accountManagerName: "",
          oldAccountManager: res.data.data.accountManager,
          oldAccountManagerName: res.data.data.accountManagerName,
          rpiNo: res.data.data.rpiNo,
          serName: "",
          serNo: "",
          oldSerName: res.data.data.serName,
          oldSerNo: res.data.data.serNo,
        }
        this.searchSerSelectParams.isSelectChild = '1';
        this.searchSerSelectParams.serviceNo = res.data.data.serNo;
        this.$refs['searchSerSelect'].getOptionList(this.searchSerSelectParams)
      });
    },
    /**
     * @func 变更服务商归属change
     * @desc 变更服务商归属选择 change
     * */
     serNoChange(value) {
      // 获取供应商
      this.serveForm.accountManager = '';
      if (value) {
        getAccountManagerList({ createUser: value }).then((res) => {
          const column = this.findObject(this.serveOption.column, "accountManager");
          column.dicData = res.data.data;
        });
      }
    },
    /**
     * @func 提交已选归属服务商
     * @desc 提交已选归属服务商
     * */
    serveSubmit(row, done, loading) {
      serviceChange(row).then(
        () => {
          this.infoData();
          this.dialogServiceVisible = false;
          this.$message({
            type: "success",
            message: "归属变更成功!",
          });
          this.$refs.serveForm.resetForm();
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    /**
     * @func 商户模块管理-2(绑定终端)
     * @desc 终端---新建弹框提交
     * */
    terminalDialogSubmit() {
      /**
       * add  新建
       * edit 修改
       * view 查看详情
       */
      if (this.terminalDialog.type !== "view") {
        this.$refs["terminalDialog"].$refs["terminalDialogForm"].validate(
          (valid) => {
            if (valid) {
              let form = this.$refs["terminalDialog"].terminalDialogForm;
              // -----add---str---
              let rtPara = {};
              form.rtParaList.map((itm) => {
                rtPara[itm.key] = itm.val;
              });
              form.rtPara = JSON.stringify(rtPara);
              // -----add---end---

              let param = {
                rpiNo: this.rpiNo,
                ...this.$refs["terminalDialog"].terminalDialogForm,
              };
              add(param).then(
                () => {
                  this.$refs["terminalDialog"].initEmpty();

                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  // setTimeout(() => {
                  this.terminalDialog.visible = false;
                  // }, 1500);
                },
                (error) => {
                  window.console.log(error);
                }
              );
            }
          }
        );
      }
    },
    /**
     * @func 商户模块管理-2(绑定终端)
     * @desc 获取 终端类型名称
     * */
    requestRptNo() {
      getRptNo(-1, -1).then((res) => {
        this.rptNoList = res.data.data.records;
      });
    },
    /**
     * @func 商户模块管理-2(绑定终端)
     * @desc 终端 新建弹框 关闭前回调
     * */
    terminalDialogHandleClose(done) {
      this.$refs["terminalDialog"].initEmpty();
      done();
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      getDetailPosIncoming(this.rpiNo).then((res) => {
        this.registerData = res.data.data;
      });
    },
    /* 商户基本信息修改 */
    handleSubmit() {
      const _this = this;
      _this.dialogType = 'edit';
      _this.informEditForm();
    },
    handleClose(done) {
      this.infoData();
      done();
    },
    informEditForm() {
      this.$refs["toRegisterForm"].$refs["registerForm"].validate((valid) => {
        if (valid) {
          const _this = this;
          editPosIncoming(_this.registerForm).then(
            (res) => {
              if (res.data.code == "200") {
                  _this.$message({
                    type: "success",
                    message: "商户登记编辑成功!",
                  });
                  _this.dialogVisible = false;
                  _this.infoData();
              } else {
                _this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    informEdit() {
      this.dialogVisible = true;
      this.dialogText = "基本信息";
      this.registerForm = JSON.parse(JSON.stringify(this.registerData))
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #FFFFFF;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}

.mer-m-b-8 {
  margin-bottom: 8px;
}

.img-margin-r10 {
  margin-right: 10px;
}

.info-switch {
  width: calc(100% / 2);
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #4663FD;
}

.solid {
  &:before {
    content: "｜";
    color: #99a7b1;
  }
}

.feint-input {
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  // border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  // color: #c0c4cc;
  color: #7f7f7f;
  // cursor: not-allowed;
}
</style>